<template>
  <form-item-wrapper :field="field">
    <el-checkbox-group
      @change="handelChange"
      v-model="ans"
      :disabled="field.disabled"
    >
      <el-checkbox
        v-for="(item, index) in field.optionItems"
        :key="index"
        :label="item.value"
      >
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </form-item-wrapper>
</template>
<script lang="ts" setup>
import FormItemWrapper from "./form-item-wrapper.vue";
import { defineProps, PropType, ref } from "vue";
import QuestionType from "@bis/types/question";
import { useFormStore } from "@bis/stores/form";

const props = defineProps({
  field: Object as PropType<QuestionType>,
  colIdx: Number,
});

const emits = defineEmits<{
  (e: "answerChange", field, colIdx): void;
}>();

const formStore = useFormStore();
const ans = ref(props.field.answer?.split("|") || []);

const handelChange = () => {
  props.field.answer = ans.value.join("|");
  emits("answerChange", props.field, props.colIdx);
};
</script>
